---
title: Types of Front End System Design Questions
description: Question formats you can expect in a front end system design interview.
seo_title: Types of Questions to Expect | Front End System Design Playbook
social_title: Types of Front End System Design questions to expect | GreatFrontEnd
seo_description: Learn about the main types of front end system design interview questions that can be asked.
---

There are two main kinds of front end system design questions: (1) Applications and (2) UI components.

## Applications

Designing applications for front end system design interviews will feel similar to general Software Engineering system design interviews, and in fact, the questions are highly similar. However, instead of talking about distributed systems, focus on how things work within the client — discuss the application architecture and how it can communicate with the server.

In this day and age, many websites are interactive and rich applications that can do virtually what many desktop applications can. If you've used Gmail, Facebook, YouTube, ChatGPT, or Google Calender on the web, you have used a web app. Web apps tend to be interactive and dynamic (contents on the page change frequently) and page navigation in a web app usually don't require a full page refresh; web apps use JavaScript to fetch remote data for the next page and dynamically change the contents and URL.

Since web apps are complex software involving multiple modules, common application architectures learnt in Software Engineering classes like Model-View-Controller (MVC), Model-View-ViewModel (MVVM) are also applicable when building web apps. React is one of the most popular JavaScript libraries by Facebook to build interactive web applications and many React web apps adopt a unidirectional reducer architecture (e.g. Flux/Redux).

Each web app has its own unique challenges and certain topics matter more than others. For example, for an e-commerce marketplace, search engine optimization (SEO) and performance are extremely important because they have a direct impact on sales. On the other hand, a messaging app isn't meant to be indexable by search engines and it's therefore not meaningful to discuss about SEO. Instead, candidates should spend more time on real-time communication protocols, which directly affects the core value proposition of the app.

### Important areas

Here's a list of commonly-asked applications during front end system design interviews and the important features and areas to focus on:

| Application | Examples | Important features | Important topics |
| --- | --- | --- | --- |
| [News feed](/questions/system-design/news-feed-facebook) | Facebook, Twitter | Feed list, Feed interactions, Post composer | Pagination approaches, Performance |
| [Messaging/Chat](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord | Real-time messaging | Real-time communication protocols |
| [E-commerce marketplaces](/questions/system-design/e-commerce-amazon) | Amazon, eBay | Product listing pages, Product detail pages, Cart & Checkout | SEO, performance |
| [Photo sharing](/questions/system-design/photo-sharing-instagram) | Instagram, Flickr, Google Photos | Photos browsing, Photos editing, Photos uploading | Media optimization |
| [Travel booking](/questions/system-design/travel-booking-airbnb) | Airbnb, Skyscanner | Search UI, Search results, Booking UI | SEO, Performance |
| [Video streaming](/questions/system-design/video-streaming-netflix) | Netflix, YouTube | Video player, Video streaming | Streaming implementation |
| [Pinterest](/questions/system-design/pinterest) | Pinterest | Masonry layout implementation | Media optimizations |
| [Collaborative apps](/questions/system-design/collaborative-editor-google-docs) | Google Docs, Google Sheets, Google Slides, Notion | Real-time collaboration | Real-time collaboration protocols, Conflict resolution, State syncing |
| [Email client](/questions/system-design/email-client-outlook) | Outlook, Apple Mail, Gmail | Mailbox syncing, Mailbox UI, Email composer | App state, offline usage |
| Drawing | Figma, Excalidraw, Canva | Canvas, Client state/data model, State management | Canvas rendering implementation |
| Maps | Google/Apple Maps, Foursquare City Guide | Map rendering, Displaying locations | Map rendering and interactions |
| File storage | Google Drive, Dropbox | File uploading, File downloading, File explorer | Uploading experience |
| Video conferencing | Zoom, Google Meet | Video streaming, Various viewing modes | Video streaming, Performance |
| Ridesharing | Uber, Lyft | Trip booking, Driver location | App state |
| Music streaming | Spotify, Apple Music | Audio streaming, Music player UI, Playlists UI | Media streaming, app state |
| Games | Tetris, Snake | Game state, Game loop, Game logic | Same as features |

## UI components

In modern front end development, it is common to use component libraries to build applications. Some popular component libraries you might have used before include Radix UI,jQuery UI, Bootstrap, Material UI, Chakra UI, etc.

It is an expectation of Front End Engineers to be able to build the various UI components needed by an application. Some UI components can be easy to build (e.g. text, button, badge, etc), while others can be much more complex (autocomplete, dropdown, modal, etc) because it involves more interactions, components, and stricter accessibility requirements. Most of the time, if you are asked to design a UI component, it would be from the latter category.

To approach system design for UI components, determine the subcomponents of the components, define the external-facing API of the component (what options/props the component should accept), describe the internal component state, API between the subcomponents (if relevant), then dive into optimizations and considerations for performance, accessibility, user experience, security, etc., where relevant.

You might have to write a small amount of code for one or more of the following purposes:

1. Describe the component hierarchy
2. Describe the shape of the component state
3. Explain some non-trivial logic within the component

For example, an image carousel would contain the current image, pagination buttons, and preview thumbnails.

```jsx
<ImageCarousel
  images={...}
  onPrev={...}
  onNext={...}
  layout="horizontal">
  <ImageCarouselImage style={...} />
  <ImageThumbnail onClick={...} />
</ImageCarousel>
```

### Customizing theming

You will most certainly be expected to design a way for users of the component (developers) to customize the component appearance. Refer to [Front End Interview Guidebook's UI Components API Design Principles Section](/front-end-interview-guidebook/user-interface-components-api-design-principles) for an overview and comparison of the different approaches.

### Examples

Examples of UI components asked during front end system design interviews:

- Design an [autocomplete component](/questions/system-design/autocomplete)
- Design a [dropdown menu component](/questions/system-design/dropdown-menu)
- Design an [image carousel](/questions/system-design/image-carousel)
- Design an [embeddable poll widget](/questions/system-design/poll-widget)
- Design a [rich text editor](/questions/system-design/rich-text-editor)
- Design a [modal component](/questions/system-design/modal-dialog)
- Design a data table with sorting and pagination
- Design a datepicker
- Design a multiselect component

## What to do during interviews?

Now that you have an understanding of the kind of questions you can be asked during Front end system design interviews, how do you go about answering them?

At GreatFrontEnd, we invented the [RADIO framework](/system-design/framework), an easy-to-remember and structured approach that you can use to ace Front End system design interview questions.
